<template>
    <div class="body">
        <div class="login_header" v-show="isLogin">
            <!-- <p class="login_title">点餐平台</p>
            <p>登录后开启快捷点餐之旅~</p> -->
            <i class="iconfont icon-daxueshidai- logo"></i>
        </div>
        <section class="login_message">
            <input type="number" maxlength="11" placeholder="手机号码" v-model="phone">
        </section>
        <section class="login_message">
            <input type="password" maxlength="12" placeholder="请输入密码" v-model="pwd" v-if="!isShowPwd">
            <input type="text" maxlength="12" placeholder="请输入密码" v-model="pwd" v-else>
            <mt-switch v-model="isShowPwd" class="is_show_pwd"></mt-switch>
        </section>
        <!-- <section class="login_message"  v-show="isLogin">
            <input type="text" maxlength="4" placeholder="验证码" v-model="code">
            <ValidCode :value.sync="validCode" class="valid_code"></ValidCode>
        </section> -->
        <section class="login_message" v-show="!isLogin">
            <input type="text" placeholder="请选择所属学校" v-model="school_name" readonly @click="showSchoolList = !showSchoolList">
            <!-- <mt-picker :slots="schoolList" :visibleItemCount='1' :itemHeight="50" valueKey="name" @change="onSchoolChange"></mt-picker>
                        <i class="iconfont icon-shangxiahuadong slide"></i> -->
        </section>
        <section class="login_message"  v-show="!isLogin">
            <input type="text" placeholder="请选择所属宿舍楼" v-model="tower_name" readonly @click="showtowerList = !showtowerList">
            <!-- <mt-picker :slots="towerList" :visibleItemCount='1' :itemHeight="50" valueKey="name" @change="onTowerChange"></mt-picker>
                        <i class="iconfont icon-shangxiahuadong slide"></i> -->
        </section>
        <section class="login_message"  v-show="!isLogin">
            <input type="text" placeholder="请选择所属楼层" v-model="floor_name" readonly @click="showfloorList = !showfloorList">
        </section>
        <section class="login_message"  v-show="!isLogin">
            <input type="text" placeholder="收货人姓名" v-model="real_name">
        </section>
        <section class="login_message"  v-show="!isLogin">
            <input type="text" placeholder="门牌号" v-model="address">
        </section>
        <!-- <section class="login_message"  v-show="!isLogin">
            <input type="number" maxlength="11" placeholder="手机号码" v-model="phone">
        </section> -->
        <phoneCode :phone="phone" type="Z" @setPhone="setPhone" v-show="!isLogin"></phoneCode>
        <section class="login_message"  v-show="!isLogin">
            <input type="text" placeholder="请选择性别" v-model="sex_text" readonly @click="showsexList = !showsexList">
            <!-- <mt-picker :slots="sexList" :visibleItemCount='1' :itemHeight="50" @change="onSexChange" valueKey="name">
            </mt-picker> -->
        </section>
        <section class="login_message set_pwd check-agree">
            <label class="remember_content"  v-show="!isLogin"><input type="checkbox" v-model="agree" name="rememberPwd" class="remember_pwd">同意<router-link to="/userAgreement">《用户协议》</router-link></label>
        </section>
        <section class="login_message set_pwd">
            <label class="remember_content"><input type="checkbox" v-model="rememberPwd" name="rememberPwd" class="remember_pwd">记住密码</label>
            <router-link to="/resetPwd">忘记密码?</router-link>
        </section>
        <section class="login_message">
            <mt-button class="btn" v-if="isLogin" @click="login">登录</mt-button>
            <mt-button class="btn" v-else @click="Register">注册</mt-button>

        </section>
        <p class="bottom_text" @click="pageChange">{{isLogin?"注册账号":"登录"}}</p>
        <mt-popup
            v-model="showSchoolList"
            popup-transition="popup-fade">
             <mt-picker :slots="schoolList" :visibleItemCount='3' valueKey="name" @change="onSchoolChange"></mt-picker>
             <button class="btn-1" @click="showSchoolList = !showSchoolList">确定</button>
        </mt-popup>
        <mt-popup
            v-model="showtowerList"
            popup-transition="popup-fade">
             <mt-picker :slots="towerList" :visibleItemCount='3' valueKey="name" @change="onTowerChange"></mt-picker>
             <button class="btn-1" @click="showtowerList = !showtowerList">确定</button>
        </mt-popup>
        <mt-popup
            v-model="showfloorList"
            popup-transition="popup-fade">
             <mt-picker :slots="floorList" :visibleItemCount='3' valueKey="floor_name" @change="onFloorChange"></mt-picker>
             <button class="btn-1" @click="showfloorList = !showfloorList">确定</button>
        </mt-popup>
        <mt-popup
            v-model="showsexList"
            popup-transition="popup-fade">
             <mt-picker :slots="sexList" :visibleItemCount='3' valueKey="name" @change="onSexChange"></mt-picker>
             <button class="btn-1" @click="showsexList = !showsexList">确定</button>
        </mt-popup>
    </div>
</template>
<script>
import ValidCode from "../components/code"
import { getSchoolList,getFloorList,login,register } from "../api"
import { Toast } from 'mint-ui';
import {getCookie,setCookie,delCookie} from '../Cookie'
import phoneCode from '../components/phoneCode'
export default {
    data() {
        return {
            rememberPwd:true,
            pwd:"",
            code:"",
            real_name:"",
            address:"",
            phone:"",
            sex:0,
            agree:false,
            sexList: [
                {
                    flex: 1,
                    values: [{name: '男生', type: 0}, {name: '女生', type: 1}],
                    className:"items"
                }
            ],
            sex_text:'',
            isShowPwd:false,
            showSchoolList:false,
            showtowerList:false,
            showfloorList:false,
            showsexList:false,
            validCode:"",
            isLogin: true,
            school_id:1,
            school_name:"",
            tower_name:"",
            floor_name:"",
            schoolList:[
                {
                    flex: 1,
                    values: [],
                    className:"items"
                }
            ],
            towerList: [
                {
                    flex: 1,
                    values: []
                }
            ],
            floorList:[
                {
                    flex: 1,
                    values: []
                }
            ],
            tower_id:"",
            vcode:"",
            recode:60
        }
    },
    created(){
        document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
                  // 通过下面这个API隐藏右上角按钮
                WeixinJSBridge.call('hideOptionMenu');
            });
        getSchoolList().then(res => {
            console.log(res)
            this.schoolList[0].values = res.data.data
        })
        this.phone = getCookie("phone")
        this.pwd = getCookie("pwd")
    },
    computed: {
      rightPhone () { // 手机号正则验证
        return /^1[3-9]\d{9}$/.test(this.phone)
      }
    },
    methods:{
        setPhone(data){
            this.vcode = data;
        },
        Register(){
            const data = {
                code:process.env.NODE_ENV === 'development'?'':window.location.search.split('&')[0].split('=')[1],
                school_id:this.school_id,
                dormitory_id:this.tower_id,
                pwd:this.pwd,
                phone:this.phone,
                address:this.address,
                gender:this.sex,
                name:this.real_name,
                openid:process.env.NODE_ENV === 'development'?'okJuy0x4up-aWwD7pYhgx3qqT6hs ':window.location.search.split('&')[1].split('=')[1],
                vcode:this.vcode,
                floor_id:this.floor_id
            }
            let reg = /^1[3-9]\d{9}$/
            if(!this.agree){
                Toast("请勾选《用户协议》注册");
                return;
            }
            if (!data.phone) {
            // 手机号码不能空
            this.showAlert('手机号码不能空')
            return
          }else if(!reg.test(data.phone)){
              this.showAlert('请输入正确手机号码')
              return;
          }else if (!data.pwd) {
            // 密码不能空
            this.showAlert('密码不能空')
            return
          }else if(!/^1[3-9]\d{9}$/.test(data.phone)){
              this.showAlert('手机号码格式错误')
              return;
          }else if(!data.school_id){
              this.showAlert('请选择所属学校')
              return;
          }else if(!data.dormitory_id){
              this.showAlert('请选择所属宿舍')
              return;
          }else if(!data.name){
              this.showAlert('请填写收货人姓名')
              return;
          }else if(!data.vcode || data.vcode.length!==6){
              this.showAlert('请输入正确验证码')
              return;
          }else if(!data.floor_id){
              this.showAlert('请选择所属楼层');
              return;
          }
          register(data).then(res=>{
              Toast(res.msg)
              if(res.code == 200){
                  this.isLogin = !this.isLogin
              }
          })
        },
        pageChange () {
            this.isLogin = !this.isLogin
        },
        onSchoolChange (picker, values) {
            if(!values[0]) return
            this.school_name = values[0].name;
            this.school_id = values[0].id
            getFloorList(values[0].id).then(res => {
                console.log(res.data);
                if(res.data.length == 0){
                    this.tower_id = null;
                    this.towerList[0].values = [];
                    this.tower_name = null;
                    this.tower_id = null;
                    this.floor_name = null;
                    this.floor_id = null;
                }else{
                    this.tower_id = res.data[0].id;
                    this.towerList[0].values = res.data;
                    this.floor_name = res.data[0].floor[0].floor_name;
                    this.floor_id = res.data[0].floor[0].floor_id;
                }
            }).catch(err => {
                console.log(err)
            })
        },
        onTowerChange (picker, values) {
            if(!values[0]) return
            // console.log(values);
            if(!values[0].floor){
                this.floor_name = "";
                this.floor_id = "";
            }
            this.floorList[0].values = values[0].floor;
            this.tower_id = values[0].id
            this.tower_name = values[0].name
        },
        onFloorChange(picker, values){
            if(!values[0]) return
            this.floor_name = values[0].floor_name;
            this.floor_id = values[0].floor_id;
        },
        onSexChange (picker, values) {
            if(!values[0]) return
            this.sex = values[0].type
            this.sex_text = values[0].name
      },
      login () {
          const {phone,pwd,validCode,code} = this
          let reg = /^1[3-9]\d{9}$/
          if (!this.phone) {
            // 用户名不能空
            this.showAlert('手机号码不能空')
            return
          }else if(!reg.test(this.phone)){
              this.showAlert('请输入正确手机号码')
              return;
          }else if (!this.pwd) {
            // 密码不能空
            this.showAlert('密码不能空')
            return
          } 
        //   else if (!this.code) {
        //     // 验证码不能空
        //     this.showAlert('验证码不能空')
        //     return
        //   } 
        //   else if (this.code.toLowerCase()!==this.validCode){
        //       this.showAlert('验证码错误')
        //       return
        //   }
         login({phone,pwd,type:2}).then(res=>{
              console.log(res);
              if(res.code !== 200){
                  this.showAlert(res.msg)
              }else{
                //   this.$store.mutations.ADD_USER(res.data.msg)
                if(this.rememberPwd){
                    setCookie('phone', this.phone, 7); //保存帐号到cookie，有效期7天
                    setCookie('pwd', this.pwd, 7); //保存密码到cookie，有效期7天
                }else{
                    delCookie('phone')
                    delCookie('pwd')
                }
                this.$store.commit("ADD_USER",res.data);
              }
          })
        //   login({phone,pwd,type:2}).then(res=>{
        //       console.log(res);
        //   }).catch(err=>{
        //       console.log(err);
        //   })
      },
        showAlert (alertText) {
            Toast({
                message: alertText,
                iconClass: 'iconfont icon-guanbi'
            });
        },
    },
    components:{ValidCode,phoneCode}
}
</script>
<style scoped>
    .logo{
        font-size: 4rem;
        line-height: 8rem;
    }
    .login_header{
        width: 100%;
        height:9rem;
        background-image: url('../images/header_bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #fff;
        text-align: center;
        font-size: 0.8rem;
    }
    .login_header::before{
        content: "";
        display: table;
    }
    .login_title{
        font-size: 1.5rem;
        font-weight: bolder;
        margin-top: 1.5rem;
        line-height: 2.5rem;
    }
    .set_pwd{
        height: 6rem;
        width: 80%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: auto;
    }
    .set_pwd a{
        color: #F0463C;
        text-decoration: underline;
        font-size: 0.95rem;
    }
    .title{
        color: #F0463C;
        font-size: 3rem;
        font-weight: bolder;
        text-align: center;
        line-height: 8rem;
    }
    .is_show_pwd {
        position: absolute;
        top: 60%;
        transform: translateY(-50%);
        left: 80%;
        width: 2rem;
    }
    .valid_code {
        position: absolute;
        top: 1rem;
        right: 8%;
        border-left: 2rem solid #fff;
    }
    .bottom_text {
        text-align: center; 
        font-size: 1rem;
        color: #F66262;
        margin: auto;
        text-decoration: underline;
    }
    .items {
        height: 100%;
    }
    .remember_content{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.95rem;
    }
    .remember_pwd{
        width: 1rem;
        height: 1rem;
        margin: 0 1.4rem 0 0;
        position: relative;
    }
    .remember_pwd::after{
        position: absolute;
        width: 1.4rem;
        height: 1.4rem;
        top: -0.1rem;
        left: -0.2rem;
        content: "";
        background: #F0463C;
        color: #fff;
        display: inline-block;
        border-radius: 0.2rem;
        text-align: center;
        line-height: 1.4rem;
    }
    .remember_pwd:checked::after{
        content: "✓";
    }
    .btn {
        background: #F66262;
        width: 80%;
        color: white;
        height: 3rem;
        font-size: 1rem;
        margin: 1rem auto;
        border-radius: 3rem;
    }
    .picker-slot {
    font-size: 1rem;
}
    .mint-popup{
        width: 80%;
        border-radius: 10px;
        overflow: hidden;
    }
    .btn-1{
        width: 100%;
        height: 2rem;
        font-size: 1rem;
        background: #fff;
        border: none;
        border-top:0.01rem solid #666;
        color: #333;
    }
    .body >>> .picker-slot {
        font-size: 1rem;
    }
    .check-agree{
        justify-content: center;
        height:3rem;
    }
    .body >>> .picker-slot {
        font-size: 1rem;
    }
    .check-agree{
        justify-content: center;
        height:3rem;
    }
</style>